<script setup>
import ChatWindow from '@/views/Chat/components/ChatWindow.vue'
import ChatInput from '@/views/Chat/components/ChatInput.vue'

import {ref, onMounted, nextTick} from 'vue'

const data = ref('')
const inputURL = ref('')
const handleInputData = (input) => {
  data.value = input
}

onMounted(() => {
  nextTick(() => {
    const container = document.getElementById('scrollContainer');
    let isUserScrolling = false;

    function scrollToBottom() {
      if (!isUserScrolling) {
        container.scrollTop = container.scrollHeight;
      }
    }

    container.addEventListener('scroll', function () {
      // 当用户手动滚动时，设置 isUserScrolling 为 true
      isUserScrolling = container.scrollTop + container.clientHeight < container.scrollHeight;
    });

    // 使用 MutationObserver 监听内容变化
    const observer = new MutationObserver(scrollToBottom);
    observer.observe(container, {childList: true, subtree: true});
  })
})


</script>

<template>
  <div class="chat-window">
      <el-input class="urlInput" v-model="inputURL" style="width: 500px"
                placeholder="请输入private llm api"/>
    <div class="chat-window-history" id="scrollContainer">
      <ChatWindow :data="data" :url="inputURL"></ChatWindow>
    </div>

    <div class="chat-input">
      <ChatInput @inputData="handleInputData"></ChatInput>
    </div>
  </div>
</template>

<style scoped>
.chat-window {
  width: 100%;
  height: 100%;
  //border: 1px solid black;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 auto;
}

.chat-window .chat-window-history {
  width: 95%;
  height: 70%;
  border: 3px solid black;
  margin: 5px auto 0;
  border-radius: 10px;
  background-color: white;
  overflow-y: auto;
}

.chat-window .chat-input {
  width: 95%;
  height: 13%;
  //border: 1px solid black;
  border-radius: 10px;
  margin: 0 auto 5px;

}

.urlInput {
  //display: inline-block;
  margin: 5px auto 0
}


</style>